<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="../../css/swiper.min.css">
    <link rel="stylesheet" href="../../css/style.css">
    <link rel="stylesheet" href="../../css/page01.css">
  <style>
    .item_img_list img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  </style>

</head>
<body class="fengmao_page">

<div id="fengmaoBox" class="">
  <!--金川风貌-->
  <div class="fengmao_box fix swiper-container">
    <div class="swiper-wrapper"></div>
  </div>
</div>

</body>
<script type="text/javascript" charset="utf-8" src="../../js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../../js/swiper.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../../js/common.js"></script>
<script>
$(function (){
  document.domain = ''

  getData();

  function getData() {
    getJson('qyzl_JCFM.json',{},function (res) {
      if(res.code == 200){
        let html = ``;

        let result = [];
        for(let i=0;i<res.data.length;i+=4){
          result.push(res.data.slice(i,i+4));
        }

        for (let j = 0; j < result.length; j++) {
          html += `<div class="swiper-slide">`
          for (let i = 0; i < result[j].length; i++) {
            let tipimg = '';
            switch (result[j][i].category) {
              case '100301':
                //环保
                tipimg = 'tip1';
                break;
              case '100302':
                //生产
                tipimg = 'tip2';
                break;
              case '100303':
                //绿色矿山
                tipimg = 'tip3';
                break;
              case '100304':
                //科技
                tipimg = 'tip4';
                break;
              default :
                tipimg = 'tip1';
                break;
            }

            let itemHtml= `<div class="item l">
            <div class="item_type">
              <img src="../../img/all/${tipimg}.png" alt="">
            </div>
            <div class="item_content inner-swiper">
              <div class="item_img_list">`;

            const attArr = result[j][i].attachments?result[j][i].attachments.split(','):[];

            for(let j = 0; j < 1;j++){
              var imgurl = 'all' + (i + 1) + '.png'
              itemHtml += `<img class="" src="../../img/all/${imgurl}" alt="">`
            }
            itemHtml += `</div>
              <div class="item_desc el2" title="${result[j][i].remark || ''}">${result[j][i].remark || ''}</div>
            </div>
          </div>`;
            html += itemHtml;
          }
          html += `</div>`
        }

        $('.fengmao_box>.swiper-wrapper').html(html);
        if(result.length > 1){
          var mySwiper = new Swiper ('.swiper-container', {
            autoplay:true,
            loop: true, // 循环模式选项
          })
        }

      }
    })
  }

})
</script>
</html>
